<html>
    
    <head>
        
        <title> <?php echo $title; ?></title>

        <!-- Chargement de JQuery -->
        <script type="text/javascript" src="<?php echo(js_url('jquery')); ?>"></script>
        <script type="text/javascript" src="<?php echo(js_url('jquery-ui')); ?>"></script>

        <!-- Chargement du script du jeu 1 -->
        <script type="text/javascript" src="<?php echo(js_url('game_2')); ?>"></script>

        <!-- Chargement de la feuille de style -->
        <link rel="stylesheet" type="text/css" href="<?php echo(css_url('game_2')); ?>">

    </head>

    <body>

        <div id="content">
            
            <div id="end_game">
                <img id="img_pixou_callback_ok" height="200" width="236" src="<?php echo(img_commun_url('pixou_end_game.png'));?>"> 
            </div>

            <!-- Définition de la zone d'interaction : zone centrale + zone de liste d'items -->
            <div id="zone_interaction">

                <!-- Définition de la zone centrale -->
                <div id="zone_centrale">
                    <div id="cadre_zone_centrale"></div>
                    <div id="fond_zone_centrale"></div>
                    <div id="pellicule_1_2"></div>
                    <div id="empl_item_1"></div>
                    <div id="empl_item_2"></div>
                    <div id="empl_item_3"></div>
                </div>

                <!-- Définition de la zone de liste d'items -->
                <div id="cadre_liste_items"></div>
                <div id="liste_items">
                    <div id="item_1_1" class="item_draggable">
                        <div id="item_1_1_barre_invisible"></div>
                    </div>
                    <div id="item_1_2" class="item_draggable">
                        <div id="item_1_2_barre_invisible"></div>
                    </div>
                    <div id="item_1_3" class="item_draggable">
                        <div id="item_1_3_barre_invisible"></div>
                    </div>
                </div>
                
                <div id="btn_check">
                    <img id="img_btn_check" height="82" width="90" src="<?php echo(img_game_2_url('btn_check.png'));?>"> 
                </div>
            </div>

            <!-- Définition de la zone basse : zone de navigation + zone de chronométrage -->
            <div id="zone_basse">

                <!-- Définition de la zone de navigation -->
                <div id="zone_navigation">
                    <a id="btn_home" type="button" href="<?php echo site_url('home/index'); ?>">
                        <div class="btns_navigation">
                            <img id="img_btn_home" height="50" width="53" src="<?php echo(img_commun_url('commun_btn_home.png'));?>"> 
                        </div>
                    </a>
                    <a id="btn_replay" type="button">
                        <div class="btns_navigation">
                            <img id="img_btn_replay" height="50" width="53" src="<?php echo(img_commun_url('commun_btn_replay.png'));?>"> 
                        </div>
                    </a>
                </div>

                <!-- Définition de la zone de chronométrage -->
                <div id="zone_chrono">
                    <div id="overlay_chrono"></div>
                    <div id="img_horloge"></div>
                    <div id="timer">
                        <div id="timing"></div>
                    </div>
                </div>

            </div>

        </div>

    </body>

</html>
